<!DOCTYPE html>
<html>
<head>
    <title>设备管理</title>
    <link rel="stylesheet" href="__STATIC__/js/element-plus-214/element_plus.css">
    <script src="__STATIC__/js/element-plus-214/vue@next.js"></script>
    <script src="__STATIC__/js/element-plus-214/element_plus.js"></script>
    <script src="__STATIC__/js/element-plus-214/zh-cn.js"></script>
    <script src="__STATIC__/js/js/jquery-3.3.1.min.js"></script>
    <script src="__STATIC__/js/layui-v2.5.5/layui.all.js"></script>
    <style>
        [v-cloak] {
            display: none !important;
        }
    </style>
</head>
<body>
<!-- layui-tab开始 -->
<div class="layui-tab" id="app" v-cloak>
    <el-card>
        <div>
            <el-form :inline="true" :model="formInline" class="demo-form-inline">
                <el-form-item label="设备名称">
                    <el-input v-model="formInline.name" placeholder="请输入设备名称" clearable></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSearch">查询</el-button>
                    <el-button type="primary" @click="handleAdd">添加设备</el-button>
<!--                    <el-button type="success" @click="exportExcel">导出</el-button>-->
                </el-form-item>
            </el-form>

        </div>
        <div class="layui-card" style="margin-top:20px">
            <el-table :data="tableData" style="width: 100%;" :header-cell-style="{background:'#f6f6f8'}" border v-loading="loading">
                <el-table-column prop="serial_number" label="设备编号"></el-table-column>
                <el-table-column prop="name" label="设备名称"></el-table-column>
                <el-table-column prop="ip" label="设备ip"></el-table-column>
                <el-table-column prop="lng" label="经度"></el-table-column>
                <el-table-column prop="lat" label="维度"></el-table-column>
                <el-table-column prop="address_name" label="所在位置"></el-table-column>
                <el-table-column prop="add_time" label="创建时间"></el-table-column>
                <el-table-column prop="edit_time" label="更新时间"></el-table-column>
                <el-table-column prop="status_str" label="状态"></el-table-column>
                <el-table-column label="操作">
                    <template #default="scope">
                        <el-button @click="handleEdit(scope.row.id)">编辑</el-button>
                        <el-button type="danger" @click="handleDelete(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <div style="margin: 10px 0;">
                <el-pagination
                        background
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :page-sizes="[10, 20, 30, 40, 50]"
                        :page-size="pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="pageTotal"
                >
                </el-pagination>
            </div>
        </div>
    </el-card>
</div>
<script type="text/javascript">
    let layer = layui.layer
    const App = {
        data() {
            return {
                loading: true,
                cri_code:'',
                tableData: [],
                addressData: [],
                pageTotal:1,
                page:1,
                pageSize:10,
                formInline:{
                    name:''
                }
            };
        },
        created: function () {
            // this.getAddressList()
            this.getList()
        },
        methods: {
            getAddressList() {
                let that = this;
                $.ajax({
                    url: "{:cmf_plugin_url('Address://admin_index/getAddressList')}",
                    data: {},
                    dataType: "json",
                    type: "post",
                    success: function (res) {
                        if (res.code === 200) {
                            that.addressData = res.data
                        }
                    }
                });
            },
            //搜索
            onSearch(){
                this.page=1;
                this.getList();
            },
            //分页
            handleCurrentChange(val) {
                this.page=val;
                this.getList();
            },
            handleSizeChange(val) {
                this.pageSize = val
                this.getList()
            },
            //导出excel
            exportExcel(){
                let that = this;
                $.ajax({
                    url: "{:cmf_plugin_url('User://admin_index/exportExcel')}",
                    data: {},
                    dataType: "json",
                    type: "post",
                    success: function (res) {
                        if (res.code === 200) {
                            window.location.href = res.data
                        }
                    }
                });
            },
            //获取列表
            getList() {
                let that = this;
                $.ajax({
                    url: "{:cmf_plugin_url('Device://admin_index/getList')}",
                    data: {
                        page:that.page,
                        pageSize:that.pageSize,
                        ...that.formInline
                    },
                    dataType: "json",
                    type: "post",
                    success: function (res) {
                        if (res.code === 200) {
                            that.tableData = res.data.data
                            that.pageTotal = res.data.total;
                        }
                        that.loading = false
                    }
                });
            },
            //添加
            handleAdd() {
                let that = this;
                let url = "{:cmf_plugin_url('Device://admin_index/add_page')}";
                layer.open({
                    type: 2//基本层类型  0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
                    , title: '新增设备'//层的标题
                    , shadeClose: false//是否点击遮罩关闭
                    , shade: 0.8//遮罩
                    , area: ['40%', '400px']//宽高
                    , fixed: false//固定
                    , content: url //iframe的url
                    , end: function () {
                        that.getList()
                    }
                });
            },
            //编辑
            handleEdit(id) {
                let that = this;
                let url = "{:cmf_plugin_url('Device://admin_index/edit_page')}?id=" + id;
                layer.open({
                    type: 2//基本层类型  0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
                    , title: '编辑设备'//层的标题
                    , shadeClose: false//是否点击遮罩关闭
                    , shade: 0.8//遮罩
                    , area: ['40%', '400px']//宽高
                    , fixed: false//固定
                    , content: url //iframe的url
                    , end: function () {
                        that.getList()
                    }
                });
            },
            //删除
            handleDelete(id) {
                this.$confirm('是否确认删除, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                }).then(() => {
                    this.deletedPost(id)
                }).catch(() => {

                })
            },
            deletedPost(id) {
                let that = this;
                $.ajax({
                    url: "{:cmf_plugin_url('Device://admin_index/del')}",
                    data: {
                        id: id
                    },
                    dataType: "json",
                    type: "post",
                    success: function (res) {
                        if (res.code === 200) {
                            that.$message({
                                type: 'success',
                                message: res.message,
                            })
                            that.getList()
                        } else {
                            that.$message({
                                type: 'error',
                                message: res.message,
                            })
                        }
                    }
                });
            },
        }
    };
    const app = Vue.createApp(App);
    app.use(ElementPlus, {
        locale: ElementPlusLocaleZhCn,
    });
    app.mount("#app");
</script>
</body>
</html>